import EventApi from "@module/EventApi";
import searchicon from "../../../../imgs/searchicon.png";
import "../../common/css/commheader.css";
import "../../index/zen_init.css";
function SimpleSearch(props) {

    //初始化插件入参
    const {holder,searchurl} = props;

    //初始化插件状态值及状态更新方法
    const [searchStatus, updateSearchStatus] = React.useState({
        searchInput:""
    })

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...searchStatus, ...value };
        console.log(newValue);
        updateSearchStatus(newValue);
    }

    //更新视图数据方法外部接口
    function updateFunctions(param1){
        _updateData(
            (searchStatus.searchInput = param1)
        )
    }

    //更新搜索的关键词
    function updateSearch(event){
        console.log(event.target.value);
        updateFunctions(event.target.value);
    }

    //根据关键词检索
    function keySearch(){
        let helpType = StateApi.getStoreState("commonHeaderConfig").helpCenter;
        console.log("keySearch",helpType);
        if(helpType == "1") {
            $state.go({
                stateName: "/HelpCenter",
                params: {
                    search: searchStatus.searchInput
                }
            });
        }else if(helpType == "3"){
                $state.go({
                    stateName: "/HelpVideo",
                    params: {
                        vSearch:searchStatus.searchInput
                    }
                });
        }else{
            $state.go({
                stateName: "/HelpProblems",
                params: {
                    columnId: 0,
                    articleId:0,
                    targetType:1,
                    publishTime:0,
                    search:searchStatus.searchInput
                }
            });
        }
    }

    //componentOnMount
    React.useEffect(() => {
        console.log("refresh view");
        console.log(searchStatus);
    });

    return (
        <div className={"search-input-warpper"}>
            <div
                style={{
                    display: "flex",
                    position: "relative"
                }}
            >
                <img
                    src={searchicon}
                    className={"search-input-search-icon"}
                />
                <input
                    type="text"
                    id="searchProductId"
                    className={"search-detail-searchcomp"}
                    placeholder={holder}
                    value={searchStatus.searchInput}
                    onChange={
                        event => updateSearch(event)
                    }
                />
                <div
                    onClick={event => {
                        keySearch(event)
                    }}
                    className={"search-input-comp"}
                >
                    <p style={{ color: "#fff", fontSize: 14 }}>
                        搜索
                    </p>
                </div>
            </div>
        </div>
    )
}

export default SimpleSearch;